<template>
  <div class="paySearch">
    <x-header>缴费明细</x-header>
    <div class="consumption-header">
      <img class="consumption-header-icon" src="../../assets/img/securityCheckImg/titledecoration.png" alt="">
      <div class="consumption-header-title">用户编号{{CONS_NO}}</div>
    </div>
    <div class="consumptionContent">
      <div class="consumption-item">
        <div class="consumption-item-title">缴费时间</div>
        <div class="consumption-item-title">收款单位</div>
        <div class="consumption-item-title">结算方式</div>
        <div class="consumption-item-title">金额（元）</div>
      </div>
      <div class="consumption-item" v-for="(item,index) in dataList" :key="'a'+index">
        <div class="consumption-item-title">{{item.CHARGE_TIME}}</div>
        <div class="consumption-item-title">{{item.RCV_ORG_NAME}}</div>
        <div class="consumption-item-title">{{item.SETTLE_MODE_NAME}}</div>
        <div class="consumption-item-title">{{item.PAY_AMT}}</div>
      </div>
      <div class="consumption-sum">
        {{sum}}
      </div>
      <div class="consumption-sum"  v-for="(item,index) in ACCOUNT_BAL_LIST" :key="index">
        当前余额： {{item.ACCOUNT_BAL}}
      </div>
      <div style="height: 1.6rem;"></div>
    </div>
    <div class="consumption-footer">
      <div class="consumption-submit">
        缴费
      </div>
    </div>
  </div>
</template>

<script>
import { XHeader } from "vux";
import Vue from "vue";
export default {
  data() {
    return {
      dataList: [],
      ACCOUNT_BAL_LIST: [],
      CONS_NO: "",
      sum:0,
      ACCOUNT_BAL:0,
      SettleMode:[],
    };
  },
  components: {
    XHeader
  },
  methods: {
    bindHeaderAdd() {
      this.$router.push({
        path: "/ticketMaintain"
      });
    }
  },
  mounted() {
    Vue.set(this, "CONS_NO", localStorage.getItem("CONS_NO"));
    const _this = this;
    // 结算方式
    AndroidApi.queryTableData(
      '{"whereClause":"select * from P_CODE where code_type= ?","whereArgs":["caSettleMode"]}',
      function(msg) {
        if (msg.resultCode === "9999") {
          if (msg.result.length != 0) {
            const SettleMode = msg.result.map(item => {
              return {
                name: item.CODE_NAME,
                value: item.CODE_VALUE
              };
            });
            Vue.set(_this, "SettleMode", SettleMode);
          } else {
            Vue.set(_this, "SettleMode", []);
          }
        }
      }
    );
    AndroidApi.queryTableData(
      JSON.stringify({
        whereClause: "SELECT * FROM PAY_LIST A where CONS_NO=?",
        whereArgs: [_this.CONS_NO]
      }),
      function(msg) {
        if(msg.resultCode == '9999'){
          console.log(msg.result);
          console.log(111111111111111111,_this.SettleMode);
          const data = msg.result.map(item=>{
            for(let i in _this.SettleMode){
              if(_this.SettleMode[i].value == item.SETTLE_MODE){
                item.SETTLE_MODE_NAME = _this.SettleMode[i].name
              }
            }
            return item;
          })
          Vue.set(_this, "dataList", data);
          _this.dataList.forEach(function(item){
            _this.sum += Number(item.PAY_AMT)
          })
        }
      } 
    );
    AndroidApi.queryTableData(
      JSON.stringify({
        whereClause: "SELECT * FROM ACCOUNT_LIST A where CONS_NO=?",
        whereArgs: [_this.CONS_NO]
      }),
      function(msg) {
        if(msg.resultCode == '9999'){
          console.log(1111111111,msg.result);
          Vue.set(_this, "ACCOUNT_BAL_LIST", msg.result);
        }
      } 
    );
    
  }
};
</script>
<style scoped lang="less">
@import "../../assets/less/style.less";
</style>
